<template>
  <div>
    <!-- 头部模块 -->
    <div class="header">
      <van-image
        width="60"
        height="60"
        round
        fit="cover"
        :src="userInfo.photo"
      />
      <h4>
        {{ userInfo.name }}
        <br />
        <van-tag color="#fff" text-color="#0098fa">{{
          userInfo.birthday
        }}</van-tag>
      </h4>
    </div>
    <!-- 操作导航模块 -->
    <van-row>
      <van-col span="8">
        <van-icon name="newspaper-o" color="#74b6ff" />
        <span>我的作品</span>
      </van-col>
      <van-col span="8">
        <van-icon name="star-o" color="#ff374d" />
        <span>我的收藏</span>
      </van-col>
      <van-col span="8">
        <van-icon name="tosend" color="#ffad2f" />
        <span>阅读历史</span>
      </van-col>
    </van-row>
    <!-- cell模块 -->
    <div>
      <van-cell-group>
        <van-cell title="编辑资料" icon="edit" is-link @click="$router.push({path:'/edit'})"/>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="小白同学" icon="chat-o" is-link @click="$router.push({path:'/student'})"/>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="系统设置" icon="setting-o" is-link />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="退出登录" icon="warning-o" is-link @click="logout" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
// 引入获取用户信息接口
import { getUserInfo } from "./user.js";

// 引入token
import {delToken} from '@/utils/token.js'

export default {
  name: "user",
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    // 发起请求-获取用户信息
    getUserInfo().then((res) => {
      this.userInfo = res.data.data;
      this.$store.commit('update',res.data.data)
    });
  },
  methods: {
    logout() {
      // 退出提示框
      this.$dialog.confirm({
        title: "提示",
        message: "您确认要退出吗？",
      })
        .then(() => {
          // 删除token
          delToken();
          // 跳转登录页
          this.$router.push({path:'/login'});
        })
        .catch(err => {return})
    },
  },
};
</script>

<style lang="less">
.header {
  height: 100px;
  background-color: #0098fa;
  display: flex;
  align-items: center;
  h4 {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
  }
  .van-image {
    padding: 0 10px;
    margin-left: 5px;
  }
}
.van-col {
  text-align: center;
  margin: 10px 0;
  span {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 10px;
  }
}
</style>
